import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Button, Row, Form, Input } from 'antd'
import BackgroundImg from './BackgroundImg'
import psd from 'assets/login/psd.png'
import user from 'assets/login/user.png'
import router from 'umi/router'
import './index.styl'

function Login (props) {
  useEffect(() => {
    const token = sessionStorage.getItem('loginInfo')
    if (token) {
      router.push('/workBench')
    }
  },[])

  const { dispatch, login } = props
 
  const { loading, } = props
  // 密码和账号
  const [username, setUsername] = useState()
  const [password, setPasword] = useState()
  // 错误提示语
  const [nameError, setNameError] = useState()
  const [passwordError, setPasswordError] = useState()

  // 账号
  const handleChange = (e) => {
    let text = /^[ ]+$/
    if (e.target.value.length === 0) {
      // setNameError('请输入账号')
      setUsername(e.target.value)
    }
    if (!text.test(e.target.value)) {
      setNameError('')
      setUsername(e.target.value.trim()) // 过滤空格
    }
    dispatch({ type: 'login/clean', })
  }

  // 密码
  const handleChange2 = (e) => {
    let text = /^[ ]+$/
    if (e.target.value.length === 0) {
      setPasword(e.target.value)
    }
    if (!text.test(e.target.value)) {
      setPasswordError('')
      setPasword(e.target.value.trim()) // 过滤空格
    }
    dispatch({ type: 'login/clean', })
  }

  // 提交登录
  const handleLogin = () => {
    // 6-20 支持英文字母、阿拉伯数字，必须包含2种，且英文字母区分大小写
    let rule = /^\w{2}\w*$/
    // let rule = /^(?![\d]+$)(?![a-zA-Z]+$)(?![!#$%^&*]+$)[\da-zA-Z!#$%^&*]{6,20}$/
    if (!username && !password) {
      setNameError('请输入账号')
      setPasswordError('请输入密码')
      return
    }
    if (!username && password) {
      setNameError('请输入账号')
      return
    }
    if (!password && username) {
      setPasswordError('请输入密码')
      return
    }
    if (password && username) {
      if (!rule.test(password) || !rule.test(username)) {
        setPasswordError('账号或密码错误')
        return
      }
      // 允许登录
      dispatch({ 
        type: 'login/login', 
        payload: {username, password}
      }).then(res => {
        if(res.code === "040003") {
          setPasswordError('账号或密码错误')
        }
      })
    }
  }

  return (
    <>
      <div className='login'>
        <div className='title'>设备5S管理平台</div>
        <div className='form_box'>
        <div className='form'>
          <div className='logo'>
            <span style={{ color: '#5493E9'}}>用户登录</span>
          </div>
            <Input
            style={{height: '0.44rem', fontSize: '0.16rem', lineHeight: '0.44rem'}}
            prefix={<div className='iconImg1'><img src={user} type="user" style={{ color: '#3B7CFF' }}/></div>}
            suffix={null}
            placeholder='请输入账号'
            onChange={handleChange}
            value={username}
            maxLength={20}
            />
            <div className='error_mesg'>{nameError ? nameError : ''}</div>
            <Input
            style={{height: '0.44rem', fontSize: '0.16rem', lineHeight: '0.44rem'}}
            prefix={<div className='iconImg2'><img src={psd} type="user" style={{ color: '#3B7CFF' }}/></div>}
            type="password"
            placeholder='请输入密码'
            onChange={handleChange2}
            maxLength={20}
            value={password}
            />
            <div className='error_mesg'>{passwordError ? passwordError : ''}</div>
          <Row>
            <Button
            type="primary"
            onClick={() =>handleLogin()}
            loading={loading.effects.login}
            loading={login.setLoding}
            >
            登录
            </Button>
          </Row>
        </div>
        {/* 背景图 */}
        <BackgroundImg/>
        </div>
        <div className='shadow'>
          <p></p>
          <p></p>
        </div>
        <div className='foot'>
          <p>©2019 中国兵器装备集团自动化研究所</p>
          <p>服务热线：028-83327782</p>
        </div>
      </div>
    </>
  )
}

Login.propTypes = {
  form: PropTypes.object,
  dispath: PropTypes.func,
  loading: PropTypes.object
}

export default connect(({ loading, login }) => ({
  loading, login
}))(Form.create()(Login))
